<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,
        img {
            border: 0;
            text-decoration: none;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        div.sdmenu {
            width: 150px;
            margin: 0 auto;
            font-size: 12px;
            padding-bottom: 10px;
            color: #fff;
        }

        div.sdmenu div {
            overflow: hidden;
        }

        div.sdmenu div.collapsed {
            height: 25px;
        }

        div.sdmenu div span {
            display: block;
            height: 15px;
            line-height: 15px;
            overflow: hidden;
            padding: 5px 25px;
            font-weight: bold;
            color: white;
            border-bottom: 1px solid #ddd;
        }
        div.sdmenu .collapsed{
            display:flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
    <script src="./toos.js"></script>
    <script>
        window.onload = function () {
            var menuSpan = document.querySelectorAll(".menuSpan");
            for (var i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick = function () {
                    //this代表当前点击的span
                    //获取当前span的父元素
                    var parentDiv = this.parentNode;
                    //关闭parentDiv
                    toggleClass(parentDiv, "collapsed");
                }
            }
        }
    </script>
</head>

<body>
    <div id="my_menu" class="sdmeau">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹</a>
            <a href="#">邮件</a>
            <a href="#">htaccess密码</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">推荐我们</a>
            <a href="#">链接我们</a>
            <a href="#">网络资源</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">工具包</a>
            <a href="#">css驱动</a>
            <a href="#">codingForums</a>
            <a href="#">css例子</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
            <a href="#">Current or not</a>
        </div>
    </div>
</body>

</html>